<template>
	<view>
		<view class="title">工单信息</view>
		<view class="nav">
			<view class="uni-flex uni-btm">
				<view class="box1"><text selectable="true">工单编号：</text></view>
				<view class="box2"><text selectable="true">{{ list.orderNum }}</text></view>
			</view>
			<!-- <view class="uni-flex uni-btm2">
				<view class="box1">工单状态：</view>
				<view class="box2">{{list.statusName}}</view>
			</view> -->
			<view class="uni-flex uni-btm2">
				<view class="box1"><text selectable="true">来电号码：</text></view>
				<view class="box2 uni-btn" @click="callPhont(list.comingTel)">
					<view><text selectable="true">{{list.comingTel}}</text></view>
					<image style="width: 25px;height: 25px;" src="../../../static/a14.png" mode=""></image>
				</view>
			</view>
			<view class="uni-flex uni-btm">
				<view class="box1">工单来源：</view>
				<view class="box2">{{list.orderSource}}</view>
			</view>
			<view class="uni-flex uni-btm2">
				<view class="box1">紧急程度：</view>
				<view class="box2">{{list.urgency}}</view>
			</view>
			<view class="uni-flex uni-btm">
				<view class="box1">创建时间：</view>
				<view class="box2">{{list.orderCreateTime}}</view>
			</view>
			
			<view class="uni-flex uni-btm2">
				<view class="box1">工单类型：</view>
				<view class="box2">{{list.orderType}}</view>
			</view>
			<!-- <view class="uni-flex uni-btm2">
				<view class="box1">业务类型：</view>
				<view class="box2">{{list.busiType}}</view>
			</view> -->
			<!-- <view class="uni-flex uni-btm">
				<view class="box1">到期时间：</view>
				<view class="box2">{{list.expireTime}}</view>
			</view> -->
			<view class="uni-flex uni-btm">
				<view class="box1">是否公开：</view>
				<view class="box2">{{list.isPublic}}</view>
			</view>
			<view class="uni-flex uni-btm2">
				<view class="box1">归属地：</view>
				<view class="box2">{{list.location}}</view>
			</view>
			<view class="uni-flex uni-btm">
				<view class="box1">派单来源：</view>
				<view class="box2">{{list.dispatchSource}}</view>
			</view>
			<view class="uni-flex uni-btm2">
				<view class="box1">诉求情感：</view>
				<view class="box2">{{list.appealEmotion}}</view>
			</view>
			<view class="uni-flex uni-btm">
				<view class="box1">到期时间：</view>
				<view class="box2">{{ list.expireTime }}</view>
			</view>
			<view class="uni-flex uni-btm2">
				<view class="box1">工单状态：</view>
				<view class="box2">{{ list.oneFiveOrderStatus }}</view>
			</view>
			<view class="uni-flex uni-btm">
				<view class="box1">业务类型：</view>
				<view class="box2">{{ list.busiType }}</view>
			</view>
			<view class="uni-flex uni-btm2">
				<view class="box1">事发时间：</view>
				<view class="box2">{{list.appelalAddress}}</view>
			</view>
			<view class="uni-flex uni-btm">
				<view class="box1">诉求地址：</view>
				<view class="box2">{{list.appelalAddress}}</view>
			</view>
			<view class="uni-flex uni-btm2">
				<view class="box1">工单标题：</view>
				<view class="box2">{{list.orderTitle}}</view>
			</view>
			
			<view class="uni-flex uni-btm">
				<view class="box1">诉求目的：</view>
				<view class="box2">{{list.appeals}}</view>
			</view>
			<view class="uni-flex uni-btm2">
				<view class="box1">内容描述：</view>
				<view class="box2">{{list.appeals}}</view>
			</view>
			<!-- <view class="uni-flex uni-btm">
				<view class="box1">附件：</view>
				<view class="box2">{{list.fuJian}}</view>
				<image v-show="list.fuJian" :src="list.fuJian" mode=""></image>
			</view> -->
		</view>
		
		<view class="title">催办信息</view>
		<view class="nav">
			<view class="uni-flex uni-btm">
				<view class="box1">添加时间：</view>
				<view class="box2">{{list.addTime}}</view>
			</view>
			<view class="uni-flex uni-btm2">
				<view class="box1">添加人员：</view>
				<view class="box2">{{list.addUserName}}</view>
			</view>
			<view class="uni-flex uni-btm">
				<view class="box1">添加内容：</view>
				<view class="box2">{{list.addContent}}</view>
			</view>
		</view>
		
		<view v-show="status == 6 || status == 12">
			<view class="title">延期信息</view>
			<view class="nav">
				<view class="uni-flex uni-btm">
					<view class="box1">延期时长：</view>
					<view class="box2">{{ list.delayApplyLength }}</view>
				</view>
				<view class="uni-flex uni-btm2">
					<view class="box1">原始延期：</view>
					<view class="box2">{{ list.oldDelayTime }}</view>
				</view>
				<view class="uni-flex uni-btm">
					<view class="box1">申请理由：</view>
					<view class="box2">{{ list.delayRemark }}</view>
				</view>
				<!-- <view class="uni-flex uni-btm2">
					<view class="box1">附件：</view>
					<view class="box2">{{ list.oneDelayFuJian }}</view>
					<image v-show="list.oneDelayFuJian" :src="list.oneDelayFuJian" mode=""></image>
				</view> -->
				
			</view>
		</view>
		
		<view v-show="status == 15 || status == 16">
			<view class="title">退回信息</view>
			<view class="nav">
				<view class="uni-flex uni-btm">
					<view class="box1">退回原因：</view>
					<view class="box2">{{ list.rebackRemark }}</view>
				</view>
				<view class="uni-flex uni-btm2">
					<view class="box1">退单人：</view>
					<view class="box2">{{ list.rebackUser }}</view>
				</view>
		
				<view class="uni-flex uni-btm">
					<view class="box1">退单时间：</view>
					<view class="box2">{{ list.rebackTime }}</view>
				</view>
			<!-- 	<view class="uni-flex uni-btm2">
					<view class="box1">附件：</view>
					<view class="box2">{{ list.rebackFu }}</view>
					<image v-show="list.rebackFu" :src="list.rebackFu" mode=""></image>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>

export default {
	data() {
		return {
			orderID:'',
			list:[],
			status: '', //当前订单的状态
			deptKey: '' //当前身份
		};
	},
	
	onLoad(e) {
		this.orderID = e.id;
		this.my_detail()
	},
	methods: {
		// 拨打电话
		callPhont(phone) {
			if (!phone) {
				uni.showToast({
					title: '号码错误',
					icon: 'none'
				});
				return;
			}
			uni.makePhoneCall({
				phoneNumber: phone,
				success: res => {
					console.log('调用成功!');
				},
				fail: res => {
					console.log('调用失败!');
				}
			});
		},
		// 将json数组里的null改成空
		null2str(data) {
			for (let x in data) {
				if (data[x] === null || data[x] === undefined || data[x] === "undefined") {
					// 如果是null 把直接内容转为 ''
					data[x] = '';
				} else {
					if (Array.isArray(data[x])) {
						// 是数组遍历数组 递归继续处理
						data[x] = data[x].map(z => {
							return null2str(z);
						});
					}
					if (typeof data[x] === 'object') {
						// 是json 递归继续处理
						data[x] = null2str(data[x]);
					}
				}
			}
			return data;
		},
		my_detail() {//工单详情
			var that = this;
			uni.request({
				url: '/app/wechatApi/wechatOneFiveOrder/getWechatOneFiveOrderDetail',
				method: 'GET',
				data: {
					orderId: that.orderID,
					openid:uni.getStorageSync('openid')
				},
				header: {
					'Content-type': 'application/x-www-form-urlencoded'
				},
				success: res => {
					if (res.data.code === 200) {
						// console.log(res)
						that.list = that.null2str(res.data.data)
						that.status = res.data.data.status; //状态
						that.deptKey = res.data.data.deptKey; //身份
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						});
					}
				},
				error: e => {
					console.log(e);
				}
			});
		},
		
		//处理
		sure() {
			uni.navigateTo({
				url: '/pages/accomplish/accomplish?id=' + this.orderID + '&' + 'orderName=' + this.list.orderNum
			});
		},

		//延迟
		postpone() {
			uni.navigateTo({
				url: '/pages/delay/delay?id=' + this.orderID
			});
		},
		//退回
		sendBack() {
			uni.navigateTo({
				url: '/pages/sendBack/sendBack?id=' + this.orderID
			});
		}
	}
};
</script>

<style>
page {
	background: #ffffff;
}
.title {
	padding-left: 20upx;
	padding: 20upx;
	color: #007AFF;
}
.nav {
	background: #ffffff;
	border-top: none;
}


.uni-btm {
	white-space: normal;
	padding: 20upx;
	background: #8ef7c9;
	color: #000000;
	opacity: 0.9;
	border-bottom: 1px solid #FFFFFF;
}

.uni-btm2 {
	white-space: normal;
	padding: 20upx;
	background: #EEEEEE;
	color: #000000;
	opacity: 0.9;
	border-bottom: 1px solid #FFFFFF;
}

.uni-height {
	height: 150upx;
}
.box1 {
	white-space: nowrap;
	width: 150upx;
}
.box2 {
	width: 580upx;
}
image{
	width: 180upx;
	height: 180upx;
}
.uni-none {
	border: none;
}
.box3 {
	color: #bdbdbd;
	height: 160upx;
	width: 580upx;
}

/* 按钮 */
.uni-box {
	display: flex;
	justify-content: space-around;
	align-content: center;
	text-align: center;
	color: #ffffff;
	width: 100%;
	margin: 50upx 0;
}
.uni-box view {
	padding: 5upx 35upx;
	border-radius: 5upx;
}
.done {
	background: #4a98ee;
}
.postpone {
	background: #48E6E7;
}
.send{
	background: #FF5C31;
}


</style>
